<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>WinHolderService</title>
    <link rel="shortcut icon" href="../image/app_icon.png" type="image/png">
    <link rel="bookmark" href="../image/app_icon.png">
    <style>
      body {
        font-size: 1.125rem;
      }

      button {
        background-color: #71baf6;
        color: white;
        border-radius: 4px;
        border-width: 0;
        font-size: 1.125rem;
        height: 50px;
        padding: 0 15px;
        cursor: pointer;
      }

      .inputClass {
        height: 30px;
        font-size: 1.125rem;
        text-align: center;
      }

      .volumeBar {
        height: 50px;
        background: #88ebc294;
        display: flex;
        align-items: center;
        padding-left: 5px;
        padding-right: 15px;
        margin-top: 5px;
      }

      .btn_mute {
        width: 38px;
        height: 100%;
        cursor: pointer;
        -webkit-appearance: none;
        outline: none;
        background: url("../image/icon_mute_off.png") no-repeat center;
        background-size: contain;
      }

      .btn_mute:checked {
        background: url("../image/icon_mute_on.png") no-repeat center;
        background-size: contain;
      }

      .buttonRow {
        display: flex;
        margin-left: -5px;
        margin-right: -5px;
        align-items: center;
      }

      .buttonRow button {
        flex: 1 1 0;
        margin: 5px;
      }

      .button_full {
        display: block;
        width: 100%;
        margin: 5px 0;
      }

      /*分割线*/
      .divider_x {
        height: 1px;
        background: #000;
        margin: 8px 10px;
      }
    </style>
</head>
<body style="display:flex; justify-content: center">
<div id="app" style="flex:1; max-width: 800px;">
    <div style="text-align: center; margin-top: 10px" v-if="errMsg">
        <span style="color: red;" v-text="errMsg"></span>
        <button @click="getAppInfo()">刷新</button>
    </div>
    <fieldset>
        <legend>状态管理</legend>
        <div>
            <span v-text="'电量: '+appInfos.systemInfo.batteryValue+'%'"></span>
            <span style="margin-left: 100px" v-text="'插电中: '+appInfos.systemInfo.isAcOnline"></span>
        </div>
        <div class="volumeBar">
            <input type="checkbox" class="btn_mute" v-model="appInfos.systemInfo.mute"
                   @click="setMute(!appInfos.systemInfo.mute)">
            <input type="range" min="0" max="100" style="height: 100%;width: 100%; outline: none; cursor: pointer; "
                   v-model="appInfos.systemInfo.volume" @change="setVolume()">
            <span style="padding-left: 10px; width: 20px" v-text="appInfos.systemInfo.volume"></span>
        </div>
        <div class="buttonRow">
            <button @click="muteAndLock()">静音&锁屏</button>
            <button @click="lock()">锁屏</button>
        </div>
        <!---->
        <div class="buttonRow" style="margin-left: 5px" v-if="appInfos.systemInfo.lockPlanTime">
            <div v-text="'将在['+appInfos.systemInfo.lockPlanTime+']时 [停播&静音&锁屏]'"></div>
            <button @click="lockPlanCancel()" style="margin-left: 10px">取消</button>
        </div>
        <div class="buttonRow" style="margin-left: 5px" v-else>
            <input class="inputClass"
                   style="border-style: inset; width: 28%;"
                   type="number"
                   onfocus="this.select()"
                   @keyup.enter="lockPlan()"
                   v-model="lockPlanMinute"/>
            <span v-text="appInfos.systemInfo.lockTime">min后</span>
            <button @click="lockPlan()" style="margin-left: 10px">停播&静音&锁屏</button>
        </div>
    </fieldset>
    <fieldset>
        <legend>电源管理</legend>
        <button class="button_full" @click="sleep()">睡眠</button>
        <div v-if="appInfos.systemInfo.shutdownTime">
            <div v-text="'将在['+appInfos.systemInfo.shutdownTime+']时 关机'"></div>
            <button class="button_full" @click="shutdownCancel()">取消关机计划</button>
        </div>
        <div v-else>
            <div>
                <input class="inputClass"
                       style="border-style: inset; width: 38%;"
                       type="number"
                       onfocus="this.select()"
                       @keyup.enter="shutdown()"
                       v-model="shutdownMinute"/>
                <span>min后关机</span>
            </div>
            <div class="buttonRow">
                <button @click="shutdown()">添加关机计划</button>
                <button @click="shutdownCancel()" style="white-space: nowrap">取消未知关机计划</button>
            </div>
        </div>
    </fieldset>

    <fieldset>
        <legend>程序</legend>
        <button class="button_full" @click="window.location.href = './control.html'">鼠键面板</button>
        <button class="button_full" @click="runExternalApp(app)" v-text="app" v-for="app in appInfos.lstExternalApp"></button>
        <!---->
        <div class="divider_x"></div>
        <button class="button_full" v-text="appInfos.systemInfo.enableKillWinUpdateTask?'关闭[KillWinUpdateTask]':'启动[KillWinUpdateTask]'"
                @click="switchKillWinUpdateTask()"></button>
        <button class="button_full" @click="doLogout()">登出</button>
        <button class="button_full" @click="doExit()">关闭程序</button>
    </fieldset>
    <footer style="text-align: center">
        <span v-text="appInfos.version+' build at '+appInfos.buildTime"></span>
    </footer>
</div>
<script type="module" src="../view/index.js"></script>
</body>
</html>